<template>
  <div class="searchB">
    <ul>
      <li v-for="(v,i) in singerList" :key="i">
        <div class="searchB_a"><router-link :to="`/singerInfo/${v.id}`"><img :src="v.img1v1Url"></router-link></div>
        <div class="searchB_b"><router-link :to="`/singerInfo/${v.id}`">{{v.name}}</router-link></div>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      // 搜索的值
      keyword: "",
      // 搜索的类型
      type: "",
      // 歌手的数据
      singerList:{}
    };
  },
  methods: {
    //   获取单曲数据
    getData() {
      axios
        .get(
          `http://127.0.0.1:3000/cloudsearch?keywords=${this.keyword}&type=${this.type}`
        )
        .then((res) => {
          this.singerList = res.data.result.artists
        });
    },
  },
  created() {
    this.keyword = this.$route.params.value;
    this.type = this.$router.history.current.name;
    this.getData();
  },
};
</script>
<style scoped>
.searchB ul{
  width: 900px;
  display: flex;
  flex-wrap: wrap;
}
.searchB ul li {
  width: 154px;
  padding-left: 24px;
  padding-bottom: 30px;
}
.searchB ul li:nth-child(1) {
  width: 130px;
  padding-left: 0px;
}
.searchB ul li:nth-child(6n+1) {
  width: 130px;
  padding-left: 0px;
}
.searchB ul li .searchB_a img{
  width: 130px;
  height: 130px;
  border: 1px solid #ccc;
}
.searchB ul li .searchB_b{
  margin-top: 5px;
  font-size: 12px;
}
.searchB ul li .searchB_b a:hover{
  text-decoration: underline;
}
</style>